<!--
// +----------------------------------------------------------------------
// | Copyright (c) 2017 https://gitee.com/honoryao All rights reserved.
// +----------------------------------------------------------------------
// | Author: honoryao <2463523099@qq.com>
// +----------------------------------------------------------------------
// | Time: 2018/6/8   
// +----------------------------------------------------------------------
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Component 组件props 属性设置</title>
</head>
<body>
<h1>Component 组件props 属性设置</h1>
<hr>
<div id="app">
    <panda here="China"></panda>
    <panda2 from-here="China"></panda2>
    <panda3 v-bind:here="message"></panda3>
</div>
<script src="../assets/js/vue.js"></script>
<script type="text/javascript">
    var app=new Vue({
        el:'#app',
        data:{
            message:'SiChuan'
        },
        components:{
            "panda":{
                template:`<div style="color:red;">Panda from {{ here }}.</div>`,
                props:['here']
            },
            "panda2":{
                template:`<div style="color:red;">Panda from {{ fromHere }}.</div>`,
                props:['fromHere']
            },
            "panda3":{
                template:`<div style="color:red;">Panda from {{ here }}.</div>`,
                props:['here']
            }
        }
    });
//    var app=new Vue({
//        el:'#app',
//        components:{
//            "panda2":{
//                template:`<div style="color:red;">Panda from {{ here }}.</div>`,
//                props:['fromHere']
//            }
//        }
//    });
</script>
</body>
</html>